<div class="jumbotron">
  <h5>模板驱动表单</h5>
  <p>
    模板驱动表单适用于页面比较固定, 例如登录页面, 可以使用模板驱动表单.
  </p>
  <div class="alert alert-warning">
      在模板驱动表单中，你只要导入了 FormsModule 就不用对 form 做任何改动来使用 FormsModule。接下来你会看到它的原理。
  </div>
  <p>使用模板驱动的一些模板语法，我们需要引入FormModule:</p>
  <pre><code highlight="import { FormsModule } from '@angular/forms';"></code></pre>
  <div>查看更多验证：<a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/Constraint_validation">https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/Constraint_validation</a></div>
</div>
<div class="d-flex">
  <div class="col-6">
    <div class="card">
      <div class="card-header">模板驱动表单</div>
      <style>
        .ng-valid[required], .ng-valid.required  {
          border-color:green;
        }
        .ng-invalid:not(form)  {
          border-color:red;
        }
      </style>
      <div class="card-body">
        <form #form="ngForm" (ngSubmit)="submit(form)">
          <div class="form-group">
            <label>真实姓名</label>
            <input type="text" name="user" #user="ngModel" 
              [(ngModel)]="data.user" class="form-control" autocomplete="username" 
              required pattern="^[\u4e00-\u9fa5]+$" minlength="2" maxlength="4">
            <small [hidden]="!user.errors?.required" class="form-text text-danger">真实姓名不能为空</small>
            <small [hidden]="!user.errors?.pattern" class="form-text text-danger">真实姓名必须是中文</small>
            <small [hidden]="!user.errors?.minlength" class="form-text text-danger">真实姓名最少二位</small>
            <small [hidden]="!user.errors?.maxlength" class="form-text text-danger">真实姓名最多四位</small>
          </div>
          <div class="form-group">
            <label for="exampleInputEmail1">密码</label>
            <input type="password" name="password" #password="ngModel" 
              required minlength="8" maxlength="20" [(ngModel)]="data.password" 
              class="form-control" autocomplete="current-password">
          </div>
          <button type="submit" [disabled]="!form.valid" class="btn btn-primary">登录</button>
        </form>
      </div>
    </div>
  </div>
  <div class="col-6">
    <pre><code [highlight]="form.value | json"></code></pre>
  </div>
</div>  
<hr />

<div class="d-flex">
  <div class="col-6">
    <pre><code [highlight]="code.html"></code></pre>
    
  </div>
  <div class="col-6">
    <div class="code-dark">
      <pre><code [highlight]="code.ts"></code></pre>
    </div>
  </div>
</div>